<template>
  <div class="swd">
    <van-nav-bar
      title="关注"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <div class="boxer" v-for="item in listpro" :key="item.id">
      <div class="lefts">
        <img :src="item.header" alt="" style="width: 5rem; height: 5rem" />
        <div class="huhuan">
          <div>昵称：{{ item.name }}</div>
          <div>地区：{{ item.address }}</div>
        </div>
      </div>
      <div class="rights">
        <van-checkbox
          v-model="item.show"
          icon-size="24px"
          style="color: #fff"
          @change="followchange(item.show, item.id)"
          >关注</van-checkbox
        >
      </div>
    </div>
  </div>
</template>


<script setup>
import { onMounted, ref, reactive } from "vue";
import { getfollow, changel } from "../api/getlogin";
import { showSuccessToast, showFailToast } from "vant";
// import { useRouter } from 'vue-router';
const checked = ref(true);
const listpro = reactive([]);
const follow = reactive({
  index: 0,
  show: false,
});
const onClickLeft = () => history.back();

const followchange = (e, id) => {
  follow.index = id;
  follow.show = e;
  if (e == true) {
    showSuccessToast("谢谢关注！");
  } else {
    showFailToast("期待你的关注！");
  }
  changel(follow);
  // console.log(e, id);
};
onMounted(async () => {
  const { data: res } = await getfollow();
  res.forEach((element) => {
    listpro.push(element);
  });
  console.log(listpro);
});
</script>
 


<style>
.boxer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1rem;
  width: 90vw;
  height: 6rem;
  /* background-color: #0094ff; */
  color: gray;
}

.lefts {
  display: flex;
}

.huhuan {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 2rem;
}
</style>